<template>
  <div class="login">
    <div class="folded-corner">
      <div class="title">ATYZ_CMS后台登录</div>
      <div class="form">
        <div class="form-item">
          <div class="item-title">账号：</div>
          <div class="item-input">
            <input v-model="form.account" type="text" placeholder="请填写账号" />
          </div>
        </div>
        <div class="form-item">
          <div class="item-title">密码：</div>
          <div class="item-input">
            <input v-model="form.password" type="text" placeholder="请输入密码" />
          </div>
        </div>
      </div>
      <div class="btn-list">
        <div @click="login">登录</div>
        <div @click="loginout">取消</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from "element-plus";
import { reactive } from "vue";
import { appPinia } from "@/libs/pinia";

const pinia = appPinia()

const patternPassword = /^[a-zA-Z0-9]{6,12}$/;
const patternAccount = /^[a-zA-Z0-9]{4,11}$/;

const form = reactive({
  account: "",
  password: "",
});

const login = () => {
  if (!patternAccount.test(form.account)) {
    return ElMessage.error("账号必须是4-12个字母或数字");
  }

  if (!patternPassword.test(form.password)) {
    return ElMessage.error("密码必须是6-12个字母或数字或符号");
  }
  //   登录逻辑
  pinia.loginActions(form)
};

const loginout = () => {
  // 清除token
  pinia.loginoutActions()
};
</script>

<style scoped lang="scss">
.login {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #111;
}

.folded-corner {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 28vw;
  height: 24vw;
  background-color: #fff;
  color: #eeeeee;
  font-family: "SDK_Geometos";
  font-weight: bold;
  letter-spacing: 0.1em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  // 鹰角折痕
  clip-path: polygon(0 0, 95% 0, 100% 5%, 100% 100%, 5% 100%, 0 95%);

  .title {
    background-color: #333;
    padding: 2rem;
    font-weight: 700;
    font-size: 1.5rem;
    border-bottom: 4px solid #37b2ff;
  }

  .form {
    padding: 0 3rem;

    .form-item {
      padding-top: 2.2rem;

      .item-title {
        font-size: 1rem;
        color: #333;
      }

      .item-input {
        padding-top: 0.5rem;

        input {
          border: 0;
          border-bottom: 2px solid #666;
          color: #666;
          transition: border-bottom 1s ease-out;
        }

        & input::placeholder {
          color: #999;
        }

        & input:focus {
          border-bottom: 2px solid #37b2ff;
        }
      }
    }
  }

  .btn-list {
    display: flex;
    justify-content: space-around;
    padding: 0 3rem;
    margin-top: 3rem;

    div {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0.8rem 2.5rem;
      color: #333;
      border: 1px solid #333;
      cursor: pointer;
      transition: all 250ms ease;
    }

    & div:hover {
      background-color: #333;
      color: #fff;
    }
  }
}</style>
